<template>
	<view>
		<!-- 导航栏 -->
		<navigation  title="修改手机号"></navigation>
	    <view class="onlie"></view>
		<view class="list">		
		    <text class="text">原手机号</text>
			<input type="text" value="" />
		    <!-- <uni-icons class="icon"  type="clear" size="20" color="#cccccc"></uni-icons>	 -->
		</view>
		<view class="list">
		    <text class="text">更换手机号</text>
			<input type="text" value="" />
		    <!-- <uni-icons class="icon"  type="clear" size="20" color="#cccccc"></uni-icons>	 -->
		</view>
		<view class="list">
		    <text class="text" >输入验证码</text>
			<input type="text" value="" style="width: 320upx;" />
		    <!-- <uni-icons class="icon"  type="clear" size="20" color="#cccccc"></uni-icons>	 -->
			<view v-if="isShowBtn" class="btncode" @click="geCode">
				获验证码
			</view>
			<view v-if="!isShowBtn" class="btncode noCode" style="">				
				重新获取{{code}}
			</view>
		</view>
		
		
		<button  class="btn">保存</button>
	</view>
</template>

<script>
	import navigation from '@/component/navigation.vue'
	export default {
		components:{
			navigation
		},
		data() {
			return {
				code:60,
				isShowBtn:true,
				timers:null
			};
		},
		onLoad() {
			
		},
		methods:{
			//获取验证码
			geCode(){
				 this.isShowBtn = false
				  this.timers = setInterval(() => {
					 this.code = this.code-1
					 if(this.code === 0){
						 this.isShowBtn = true
						 clearInterval(this.timers)
					 }					 
				 },1000)
				
			}
		}
	}
</script>

<style lang="less">
.onlie{
	width:750upx;
	height:16upx;
	background:rgba(245,246,246,1);
}
.btn{
	position: fixed;
	left: 50%;
	bottom: 73upx;
	margin-left: -343upx;
	width:686upx;
	height:73upx;
	background:rgba(64,108,235,1);
	border-radius:36upx;
	line-height: 73upx;
	font-size:28upx;
	font-family:PingFang SC;
	font-weight:500;
	color:rgba(255,255,255,1);
}

.list{
	position: relative;
	width:718upx;
	padding: 32upx 0;
	margin-left: 32upx;
    overflow: hidden;
	display: flex;
	justify-content: left;
	.text{
		font-size:28upx;
		font-family:PingFang SC;
		font-weight:500;
		color:rgba(25,25,25,1);
	}
	input{
		width:500upx;
		margin-left: 10upx;
		padding-left: 20upx;
		padding-bottom: 20upx;
		font-size:28upx;
		font-family:PingFang SC;
		font-weight:500;
		color:rgba(25,25,25,1);
		border-bottom:1upx solid rgba(226,226,226,1) ;
	}
	.btncode{
		position: absolute;
		right: 31upx;
		top: 32upx;
		width:169upx;
		height:51upx;
		border:1upx solid rgba(64,108,235,1);
		border-radius:26upx;
		font-size:26upx;
		font-family:PingFang SC;
		font-weight:500;
		color:rgba(64,108,235,1);
		text-align: center;
		line-height: 51upx;
	}
	.noCode{
		border:1upx solid #CCCCCC;
		color:#CCCCCC;
	}
	.icon{
		position: absolute;
		right: 31upx;
		top: 32upx;
	}
}
</style>
